<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
	#nav{
		position:absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 55px;
		background: #f5f5f5;
	}
	.nav-item{
		display: block;
		-webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    text-align: center;
	    padding: 8px 0 0 0;
	}
	.nav-item-active{
		color:#00A8E5 ;
	}
	#addicon-box{
		padding: 4px 0 0 0;
	}
	#addicon{
		display: block;
		width:48px;
		height:48px;
		background:#00A8E5;
		margin: 0 auto;
		border-radius: 38px;
		text-align: center;
		line-height: 48px;
		color: #fff;
	}
	.nav-title{
		display: block;
		font-size:10px;
		padding-top: 5px;
	}
	.nav-icon{
		font-size: 20px;
	}
	#city{
		width: 80px;
		text-align: left;
		text-indent: 10px;
		color: dodgerblue;
	}
	.icon-dingwei{
		padding-right:5px;
	}
	.ricons{
		width: 80px;
		text-align: right;
		padding-right: 10px;
		font-size: 16px;
		color: orangered;
	}
	.hide{
		display: none;
	}
	.jheader{
		position: relative;
		background: #eee;
	}
</style>
</head>
<body>
<div id="immersed" class="immersed hide"></div>
<div id="list.html" class="line-b jflex jheader">
	<a class="header-item" id="city">
		<i class="iconfont icon-dingwei"></i>
		<span id="cityname">杭州</span>
	</a>
	<div id="jheader-center" class="header-item">汽车之道</div>
	<a class="header-item header-item-r ricons">
		<i class="iconfont icon-fabu2"></i>&nbsp;<span class="rtxt">发布</span>
	</a>
</div>

<div id="baoyang.html" class="line-b jheader jflex hide">
	<div id="jheader-center" class="header-item">保养预约</div>
</div>

<div id="luntan.html" class="line-b jheader jflex hide">
	<a class="header-item" id="city">
	</a>
	<div id="jheader-center" class="header-item">论坛</div>
	<a class="header-item header-item-r ricons">
		<i class="iconfont icon-fabu2"></i>&nbsp;<span class="rtxt">发帖</span>
	</a>
</div>

<div id="xiaoxi.html" class="line-b jheader jflex hide">
	<div id="jheader-center" class="header-item">消息</div>
</div>

<div id="geren.html" class="line-b jheader jflex hide">
	<div id="jheader-center" class="header-item">我</div>
</div>

<div id="nav" class="jflex line-t ltcolor1">
	<a data-title="汽车生活" class="nav-item nav-item-active" data-auth="0" data-url="list.html">
		<i class="nav-icon iconfont">&#xe600;</i>
		<span class="nav-title">首页</span>
	</a>
	<a data-title="保养预约" class="nav-item" data-auth="1" data-url="baoyang.html">
		<i class="nav-icon iconfont">&#xe602;</i>
		<span class="nav-title">保养预约</span>
	</a>
	<a data-title="汽车论坛" id="addicon-box" class="nav-item" data-auth="1" data-url="luntan.html">
		<span id="addicon"><i class="iconfont">&#xe604;</i></span>
	</a>
	<a data-title="消息" class="nav-item" data-auth="1" data-url="xiaoxi.html">
		<i class="nav-icon iconfont">&#xe601;</i>
		<span class="nav-title">消息</span>
	</a>
	<a data-title="我" class="nav-item" data-auth="1" data-url="geren.html">
		<i class="nav-icon iconfont">&#xe603;</i>
		<span class="nav-title">我</span>
	</a>
</div>

<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
document.body.addEventListener('touchstart', function () {});
//需要预加载的四个页面
var subpages = ['list.html','baoyang.html','luntan.html','xiaoxi.html','geren.html'];
//5个菜单的点击事件
var navClickstatus={
	"list.html":false,
	'baoyang.html':true,
	'luntan.html':true,
	'xiaoxi.html':true,
	'geren.html':true
};
//标记第一个list.html为当前显示的页面
var activeTab = subpages[0];
mui.init({
	preloadLimit:15, //同时并存的预加载窗口数量
	swipeBack: false,
	statusBarBackground: '#eee'//设置状态栏颜色,仅iOS可用
});

mui.plusReady(function(){
	//获取操作系统配置
	window.localStorage.setItem("_W",window.innerWidth);
	//是否支持沉侵式
	var isImmer=webapp.isImmersedStatusbar();
	var statusBarH;
	if(isImmer==true || isImmer=="true"){
		statusBarH=webapp.getStatusbarHeight();
	}
	//创建广告页面
	createAd();	
	//创建子页面
	creatSubpage(subpages);
	//初始化两个模板页面
	initTemplates();
	//创建登陆界面
	createLogin();
	//检测版本更新
	window.setTimeout(function(){
		checkVersion();
	},3000);
	
	
});

//检测到有新版本，请点击确认进行更新！
function checkVersion(){
	var version;
	var systemName = plus.os.name;
	plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo){
		version = wgtinfo.version;
		webapp.ajax({
			url:"/carLife/common/interface/check/version",
			data:{version:version},
			success:function(json){	
				if(json.code=="200"){
					if(json.data.state == true){
						plus.nativeUI.confirm("检测到有新版本，请点击确认进行更新！", function(e){
							if(e.index==0){
								if(systemName == "iOS"){
									//iOS直接跳到AppStore去下载
									plus.runtime.openURL(json.data.ios_download_url);
								}else{
									//Android自动下载
									mui.toast("正在后台安装中，请稍后。。。");
									var dtask = plus.downloader.createDownload(json.data.android_download_url, {}, function ( d, status ) {
									    if ( status == 200 ) { // 下载成功
								            plus.runtime.install(d.filename,{},function(){
												mui.toast("应用资源更新完成！");
									            plus.runtime.restart();
										    },function(e){
										        webapp.closeWaiting();
										        plus.nativeUI.alert("安装wgt文件失败["+e.code+"]："+e.message);
										    });
									    } else {//下载失败
									        alert( "Download failed: " + status ); 
									    }  
									});
									dtask.start();
								}
							}
						},"版本更新");
					}else{

					}
				}else{
					plus.nativeUI.toast("版本检测失败！");						
				}
				return ;
			}
		});
	});
}
//底部菜单的点击
mui('#nav').on('touchstart', '.nav-item', function(e) {
	navClick(this.getAttribute('data-url'),this.getAttribute("data-auth"),this.classList,this.getAttribute("data-title"));
});

mui('.jheader').on('touchstart', '.ricons', function(e) {
	var webview=plus.webview.getWebviewById(activeTab);
	mui.fire(webview,"indexRiconClick");
});

function createAd(){
	var w = plus.webview.create("ad.html","ad.html",{
		top:0,
		bottom:0,
		zindex:10000
	});
	w.show();
	plus.navigator.closeSplashscreen();
}

/**
 * 
 * 城市定位
 * 
 */
mui('#jheader').on('touchstart', '#city', function(e) {
	webapp.openByTpl({
		title:"城市定位",
		hrefs:"/tpl/citys.html" 
	});
});

/**
 * 
 * 获取定位信息,根据城市进行搜索
 * 
 */
window.addEventListener("changcity",function(e){
	document.getElementById("cityname").innerHTML=e.detail.city;
	mui.fire(
		plus.webview.getWebviewById("list.html"),
		"seachByCity",
		{"city":e.detail.city}
	);
})
/**
 * 
 * 
 * 底部菜单的点击
 * 
 */
function navClick(targetTab,_auth,classlists,title){
	if (targetTab == activeTab) {//如果点击的和当前一样，不跳转
		return;
	}
	
	//判断是否需要登陆
	if(_auth=="1"){
		var _token=window.localStorage.getItem(webapp.config.TOKEN);
		if(webapp.util.isNull(_token)){
			webapp.showLogin();
			return false;
		}
	}
	
	//设置顶部标题
	document.getElementById(targetTab).classList.remove("hide");
	document.getElementById(activeTab).classList.add("hide");
	
	//显示点击的tab菜单对应的子webview，这里用fade-in动画，直接显示有抖动
	plus.webview.show(targetTab);
	plus.webview.hide(activeTab);
	activeTab=targetTab;
	//设置高亮
	document.querySelector('.nav-item-active').classList.remove("nav-item-active");
	classlists.add("nav-item-active");
	//如果是点击的保养预约菜单，需要触发加载数据的事件
	if(navClickstatus[activeTab]){
		mui.fire(plus.webview.getWebviewById(activeTab),"loadList");
		navClickstatus[activeTab]=false;
	}
	return false;
}
/**
 * 创建登陆界面
 */
function createLogin(){
	var subpage_style = {
		top:0,
		bottom:0,
		scrollIndicator:"none",
		hardwareAccelerated:true //开启硬件加速
	};
	var template = mui.preload({
	    url:'login.html',
	    id:'login.html',
	    styles:subpage_style
	});
}
/**
 * 创建子页面
 */
function creatSubpage(subpages){
	var subpage_style = {
		top: '45px',
		bottom: '55px',
		zindex:0,
		hardwareAccelerated:true //开启硬件加速
	};
	plus.navigator.setFullscreen(false);
	plus.screen.lockOrientation("portrait-primary");
	var self = plus.webview.currentWebview();
	//循环创建缓存界面
	for (var i = 0; i < subpages.length; i++) {
		var temp = {};
		var sub = plus.webview.create(
			subpages[i], 
			subpages[i], 
			subpage_style
		);
		if (i > 0) {
			sub.hide();
		}else{
			sub.show();
		}
		self.append(sub);
	}
}


/**
 * 创建两个模板页面，如果有三级页面，以后需要创建三个模板
 */
function getTemplate(name, header, content){
	//预加载共用父模板；
	var headerWebview = mui.preload({
		url: header,
		hardwareAccelerated:true, //开启硬件加速
		id:name+"-main",
		styles: {
			top:0,
			dock:"top",
			popGesture: "hide",
			hardwareAccelerated:true,
			scrollIndicator:"none",
			bounce:"none"
		},
		extras: {
			mType: 'main'
		}
	});

	//预加载共用子webview
	var subWebview = mui.preload({
		url:"",
		id:name+"-sub",
		hardwareAccelerated:true, //开启硬件加速
		styles: {
			top: '45px',
			bottom: '0px',
			popGesture: "hide",
			hardwareAccelerated:true,
			scrollIndicator:"none",
			bounce:"none"
		},
		extras: {
			mType: 'sub'
		}
	});
	subWebview.hide();
	subWebview.addEventListener('titleUpdate', function() {
		setTimeout(function() {
			subWebview.show();
		},400);
	});
	headerWebview.append(subWebview);
	//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
	if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
		headerWebview.addEventListener('hide', function() {
			subWebview.hide("none");
		});
	}
}

var initTemplates = function() {
	getTemplate('common', 'template.html');
	getTemplate('common2', 'template2.html');
};
</script>
</body>
</html>
